<template>
    <el-select class="h-custom-select" v-model="selectedValue" :placeholder="placeholder" v-bind="$attrs"
        :teleported="false" popper-class="custom-select-popper">
        <slot>
            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
        </slot>
    </el-select>
</template>

<script lang="ts" setup>
import { computed, type PropType } from 'vue'
interface Options {
    label: string|number,
    value: string | number
}
const props = defineProps({
    modelValue: [String, Number, Array, Object],
    placeholder: {
        type: String,
        default: '请选择'
    },
    options: {
        type: Array as PropType<Options[]>,
        required: true
    }
})

const emit = defineEmits(['update:modelValue'])

const selectedValue = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
})
</script>
<style lang="less">
.h-custom-select {
    --el-color-primary: var(--theme-color);
    --el-text-color-placeholder: var(--main-text-color);
    --el-fill-color-blank: var(--border-color);
    --el-text-color-regular: var(--main-text-color);
    --el-text-color-placeholder: #a8abb2;
}

.custom-select-popper {
    background-color: var(--head-tab-bg-color);
    --el-border-color-light: var(--border-color);

    .el-select-dropdown__item {
        &.selected {
            color: var(--theme-color) !important;
        }

        &.is-hovering {
            background-color: var(--theme-hover-color) !important;
        }
    }
}
</style>